<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>

    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

    <script type="text/javascript" src="js/content.js"></script>
    <script type="text/javascript" src="js/label.js"></script>
    <script type="text/javascript" src="js/human_table.js"></script>
</head>
<body>
    <nav class="container-fluid bg-dark">
        <div class="container-lg row " style="margin: 0 auto; height: 66px;">
            <div class="col-md-2 text-white text-left align-self-center" style="font-family: 苹方-简;height: 28px;">
                <h4>重庆工程学院</h4>
            </div>
            <div class="col-md-6 align-self-center">
                <ul class="nav nav-justified ">
                    <li class="nav-item"><a class="nav-link active text-light " href="#name1" data-toggle="tab">后台首页</a>
                    </li>
                    <li class="nav-item "><a class="nav-link  text-light" href="#name2" data-toggle="tab">用户管理</a></li>
                    <li class="nav-item "><a class="nav-link  text-light" href="#name3" data-toggle="tab">内容管理</a></li>
                    <li class="nav-item "><a class="nav-link  text-light" href="#name4" data-toggle="tab">标签管理</a></li>
                </ul>
            </div>
            <div class="col-md-4 align-self-center text-right">
                <ul class="list-unstyled list-inline text-white " style="display:inline;">
                    <li class="list-inline-item dropdown">
                        <a class="text-white" data-toggle="modal" id='username' href="#" data-target="#login_modal">登录</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">前台首页</a>
                            <a class="dropdown-item" href="#name5" data-toggle="tab">个人主页</a>
                            <a class="dropdown-item" href="#">个人设置</a>
                            <a class="dropdown-item" href="#">账户中心</a>
                            <a class="dropdown-item" href="#">我的收藏</a>
                          </div>
                    </li>
                    <!-- 模态框 -->
                    <div class="modal fade" id="login_modal">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title">登录</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    <div class="col-md-12">
                                    <!-- 加载内容栏目 -->
                                    <ul class="list-unstyled text-dark text-left">
                                        <li style="margin:2rem 0;">
                                            <h3>用户名</h3>
                                            <input id="login_username" type="text" class="col-md-12 border"
                                                placeholder="输入用户名" style="height: 40px;border-radius:3px;">
                                        </li>
                                        <li style="margin:2rem 0 3rem 0;">
                                            <h3>密码</h3>
                                            <input id="login_password" type="password" class="col-md-12 border"
                                                placeholder="输入密码" style="height: 40px;border-radius:3px;">
                                        </li>
                                    </ul>
                                </div>
                                    <!-- 内容栏目结束 -->
                                    <!-- 模态框底部 -->
                                    <div class="modal-footer">
                                        <button class="col-md-3 border bg-light" style="height: 50px;"
                                            data-dismiss="modal" id="login">登录</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 模态窗口结尾 -->
                    <li class="list-inline-item">|</li>
                    <li class="list-inline-item"><a class="text-white" href="#" id="zc_tc">注册</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="tab-content">
        <!-- 后台首页 -->
        <div class="container-lg tab-pane show fade  active" id="name1" style="margin:1rem auto;">
            <div class="row" style="margin: 0;">
                <div class="col-md-6">
                    <div class="col-md-12" style="margin: 1rem auto 4rem auto;">
                        <h5> 网站数据统计</h5>
                        <div class="bg-light row border shadow-sm ">
                            <table class="table col-md-12 text-center" style="margin: 0 auto;">
                                <thead class="thead-light">
                                    <tr>
                                        <th>统计项目</th>
                                        <th>今日数据</th>
                                        <th>昨日数据</th>
                                    </tr>
                                </thead>
                                <tbody id="hy_shuju">
                                    <tr>
                                        <td>会员注册</td>
                                        <td>10</td>
                                        <td>15</td>
                                    </tr>
                                    <tr>
                                        <td>会员登录</td>
                                        <td>50</td>
                                        <td>55</td>
                                    </tr>
                                    <tr>
                                        <td>发帖数量</td>
                                        <td>100</td>
                                        <td>300</td>
                                    </tr>
                                    <tr>
                                        <td>转载次数</td>
                                        <td>100</td>
                                        <td>300</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <h5>热门帖子</h5>
                        <div class="bg-light row border shadow-sm">
                            <ul class="list-unstyled col-md-11 " style="margin: 0.8rem auto;" id="tieZi">
                                <li class="row border-bottom " style="margin:1rem 0; padding-bottom: 1rem;">
                                    <a class='text-truncate col-md-8' style="display: block;">
                                        今日说法
                                    </a>
                                    <span class="col-md-4 text-right" style="display: block;">
                                        2020-6-12
                                    </span>
                                </li>
                                <li class="row border-bottom " style="margin: 1rem 0;padding-bottom: 1rem;">
                                    <a class='text-truncate col-md-8 ' style="display: block;">
                                        今日说法
                                    </a>
                                    <span class="col-md-4 text-right" style="display: block;">
                                        2020-6-12
                                    </span>
                                </li>
                                <li class="row border-bottom " style="margin: 1rem 0;padding-bottom: 1rem;">
                                    <a class='text-truncate col-md-8 ' style="display: block;">
                                        今日说法
                                    </a>
                                    <span class="col-md-4 text-right" style="display: block;">
                                        2020-6-12
                                    </span>
                                </li>
                                <li class="row border-bottom " style="margin: 1rem 0;padding-bottom: 1rem;">
                                    <a class='text-truncate col-md-8 ' style="display: block;">
                                        今日说法
                                    </a>
                                    <span class="col-md-4 text-right" style="display: block;">
                                        2020-6-12
                                    </span>
                                </li>
                                <li class="row border-bottom " style="margin:1rem 0;padding-bottom: 1rem;">
                                    <a class='text-truncate col-md-8 ' style="display: block;">
                                        今日说法
                                    </a>
                                    <span class="col-md-4 text-right" style="display: block;">
                                        2020-6-12
                                    </span>
                                </li>
                                <li class="row border-bottom " style="margin: 1rem 0;padding-bottom: 1rem;">
                                    <a class='text-truncate col-md-8 ' style="display: block;">
                                        今日说法
                                    </a>
                                    <span class="col-md-4 text-right" style="display: block;">
                                        2020-6-12
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6" style="margin:1rem auto;">
                    <h5>留言板</h5>
                    <div class="bg-light row border shadow-sm">
                        <ul class="list-unstyled col-md-10" style="margin: 1rem auto 1.5rem auto;" id="liuyan_ul">
                            <li class="border  border-radius row " style="border-radius: 5px;margin-top: 0.5rem;">
                                <a class="text-warp  col-md-10"
                                    style="display: inline-block; margin: 2rem auto 1.5rem auto;">
                                    今天有无打篮球的人，速来宿舍楼下集合
                                </a>
                                <p class="text-right col-md-3 text-truncate  offset-md-6">狗蛋</p>
                                <span class="col-md-3 text-truncate" style="display: inline-block;">2020-6-12</span>
                            </li>
                            <li class="border  border-radius row " style="border-radius: 5px;margin-top: 0.5rem;">
                                <a class="text-warp  col-md-10"
                                    style="display: inline-block; margin: 2rem auto 1.5rem auto;">
                                    今天有无打篮球的人，速来宿舍楼下集合
                                </a>

                                <p class="text-right col-md-3 text-truncate  offset-md-6">狗蛋</p>
                                <span class="col-md-3 text-truncate" style="display: inline-block;">2020-6-12</span>
                            </li>
                            <li class="border  border-radius row " style="border-radius: 5px;margin-top: 0.5rem;">
                                <a class="text-warp  col-md-10"
                                    style="display: inline-block; margin: 2rem auto 1.5rem auto;">
                                    今天有无打篮球的人，速来宿舍楼下集合
                                </a>

                                <p class="text-right col-md-3 offset-md-6  text-truncate">狗蛋</p>
                                <span class="col-md-3 text-truncate" style="display: inline-block;">2020-6-12</span>
                            </li>
                        </ul>

                        <h6 class="col-md-10 text-left" style="margin: 0 auto;">请输入您的留言</h6>
                        <textarea class="col-md-10" style="margin: 0.8rem auto;resize: none; height: 150px;"
                            id="liuyan_text" placeholder="请输入留言"></textarea>
                        <button class="btn btn-info col-md-2 offset-md-9" style="margin-bottom:4rem ;"
                            id="liuyan">留言</button>
                    </div>
                </div>
            </div>
            <div class="row" style="margin:3rem auto;">
                <div class="col-md-12 ">
                    <h5>浏览人数统计</h5>
                    <div class="bg-light row border shadow-sm" style="height:400px;padding-top:30px;margin-left:0;"
                        id="week_man">

                    </div>
                </div>
                <div class="col-md-12" style="margin: 1rem 0;">
                    <h5> 服务器状态</h5>
                    <div class="bg-light row border shadow-sm" style="margin-left: 0;">
                        <ul class="text-center row col-md-12 list-unstyled" style="margin:1rem auto;overflow: hidden;">
                            <li class="col-md-3" style="margin:0 0">
                                <div id="cpu" class="border"
                                    style="width: 200px;height:200px;border-radius: 50%;background: #fff;">
                                    <span
                                        style="font-family: 苹方-简;font-size:3rem;display: inline-block; margin-top: 3rem;">73%</span>
                                    <p>CPU</p>
                                </div>
                            </li>
                            <li class="col-md-3" style="margin:0 0">
                                <div id="gpu" class="border"
                                    style="width: 200px;height:200px;border-radius: 50%;background: #fff;">
                                    <span
                                        style="font-family: 苹方-简;font-size:3rem;display: inline-block; margin-top: 3rem;">73%</span>
                                    <p>GPU</p>
                                </div>
                            </li>
                            <li class="col-md-3" style="margin:0 0">
                                <div id="ram" class="border"
                                    style="width: 200px;height:200px;border-radius: 50%;background: #fff;">
                                    <span
                                        style="font-family: 苹方-简;font-size:3rem;display: inline-block; margin-top: 3rem;">73%</span>
                                    <p>RAM</p>
                                </div>
                            </li>
                            <li class="col-md-3" style="margin:0 0">
                                <div id="dis" class="border"
                                    style="width: 200px;height:200px;border-radius: 50%;background: #fff;">
                                    <span
                                        style="font-family: 苹方-简;font-size:3rem;display: inline-block; margin-top: 3rem;">73%</span>
                                    <p>DIS</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 用户管理 -->
        <div class="container-lg row tab-pane show fade" id="name2" style="margin:0 auto;">
            <div class="row">
                <h4 class="col-md-12 border-bottom" style="margin: 2rem 0;padding-bottom: 1rem;">用户管理</h4>
                <div class=" col-md-12 border-bottom">
                    <ul class="nav nav-tabs col-md-12 ">
                        <li class="nav-item active ">
                            <a class="nav-link active" data-toggle="tab" href="#human_list1">用户管理</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" data-toggle="tab" href="#human_list2">用户搜索</a>
                        </li>
                        <a class="offset-md-9 align-self-center" style="font-size: 14px;display: inline-block;"
                            data-toggle="modal" data-target="#adduser" href="#">添加用户+</a>
                        <!-- 模态框 -->
                        <div class="modal fade" id="adduser">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <!-- 模态框头部 -->
                                    <div class="modal-header">
                                        <h4 class="modal-title">添加</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <!-- 模态框主体 -->
                                    <div class="modal-body">
                                        <div class="col-md-10" style="margin:0 auto;">
                                            <ul class="list-unstyled">
                                                <li style="margin:2rem 0;">
                                                    <h3>用户名</h3>
                                                    <input id="add_username" type="text" class="col-md-12 border"
                                                        placeholder="输入用户名" style="height: 40px;border-radius:3px;">
                                                </li>
                                                <li style="margin:2rem 0 3rem 0;">
                                                    <h3>Email</h3>
                                                    <input id="add_email" type="text" class="col-md-12 border"
                                                        placeholder="输入email" style="height: 40px;border-radius:3px;">
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- 模态框底部 -->
                                        <div class="modal-footer">
                                            <button class="col-md-3 border bg-light" style="height:50px;"
                                                data-dismiss="modal" id="add_user">添加</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ul>
                    <div class="tab-content">
                        <div id="human_list1" class="tab-pane show fade active ">
                            <table id="human_table1" class=" table table-striped text-center ">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>用户</th>
                                        <th>邮箱</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- 模态框 -->
                            <div class="modal fade" id="modify_user">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <!-- 模态框头部 -->
                                        <div class="modal-header">
                                            <h4 class="modal-title">修改</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <!-- 模态框主体 -->
                                        <div class="modal-body">
                                            <div class="col-md-10" style="margin:0 auto;">
                                                <ul class="list-unstyled">
                                                    <li style="margin:2rem 0;">
                                                        <h3>用户名</h3>
                                                        <input id="modify_username" type="text" class="col-md-12 border"
                                                            placeholder="输入用户名"
                                                            style="height: 40px;border-radius: 3px;">
                                                    </li>
                                                    <li style="margin:2rem 0 3rem 0;">
                                                        <h3>Email</h3>
                                                        <input id="modify_email" type="text" class="col-md-12 border"
                                                            placeholder="输入email"
                                                            style="height: 40px;border-radius: 3px;">
                                                    </li>
                                            </div>
                                            <!-- 模态框底部 -->
                                            <div class="modal-footer">
                                                <button class="col-md-3 border bg-light" style="height: 50px;"
                                                    data-dismiss="modal" id="modify_user_btn">修改</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <ul class="list-unstyled list-inline" id="page_btn_ul">
                                <li class="list-inline-item"><button class="btn btn-light border">1</button></li>
                                <li class="list-inline-item"><button class="btn btn-light border">2</button></li>
                                <li class="list-inline-item"><button class="btn btn-light border">3</button></li>
                                <li class="list-inline-item"><button class="btn btn-light border">4</button></li>
                            </ul>
                        </div>
                        <div id="human_list2" class="tab-pane show fade">
                            <div class="col-md-10" style="margin:0 auto;">
                                <ul class="list-unstyled">
                                    <li style="margin:2rem 0;">
                                        <h3>用户名</h3>
                                        <input id="sh_username" type="text" class="col-md-12 border" placeholder="输入用户名"
                                            style="height: 40px;border-radius: 3px;">
                                    </li>
                                    <li style="margin:2rem 0;">
                                        <h3>UID</h3>
                                        <input id="sh_id" type="text" class="col-md-12 border" placeholder="输入UID"
                                            style="height: 40px;border-radius: 3px;">
                                    </li>
                                    <li style="margin:2rem 0;">
                                        <h3>Email</h3>
                                        <input id="sh_email" type="text" class="col-md-12 border" placeholder="输入email"
                                            style="height: 40px;border-radius: 3px;">
                                    </li>
                                    <button class="col-md-3 border bg-light" style="height: 50px;" id="serch_user"
                                        data-toggle="modal" data-target="#myModal">查询</button>
                                    <!-- 模态框 -->
                                    <div class="modal fade" id="myModal">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <!-- 模态框头部 -->
                                                <div class="modal-header">
                                                    <h4 class="modal-title">查询内容</h4>
                                                    <button type="button" class="close"
                                                        data-dismiss="modal">&times;</button>
                                                </div>
                                                <!-- 模态框主体 -->
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <table class="table table-striped text-center">
                                                            <thead>
                                                                <tr>
                                                                    <th>ID</th>
                                                                    <th>姓名</th>
                                                                    <th>email</th>
                                                                    <th>操作</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="sh_result_list">
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <!-- 模态框底部 -->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">关闭</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容管理 -->
        <div class="container-lg tab-pane show fade" id="name3" style="margin:0 auto;">
            <div class="row">
                <h4 class="col-md-12 border-bottom" style="margin: 2rem 0;padding-bottom: 1rem;">内容管理</h4>
                <div class=" col-md-12 border-bottom">
                    <ul class="nav nav-tabs col-md-12 ">
                        <li class="nav-item active ">
                            <a class="nav-link active" data-toggle="tab" href="#text_list1">内容管理</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" data-toggle="tab" href="#text_list2">添加内容</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <!-- 内容管理栏目 -->
                        <div id="text_list1" class="tab-pane show fade active">
                            <table class=" table table-striped text-center" style="table-layout: fixed;">
                                <thead>
                                    <tr>
                                        <th style="width: 50%;">标题</th>
                                        <th style="width: 15%;">作者</th>
                                        <th style="width: 25%;">时间</th>
                                        <th style="width: 20%;">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="c_table">
                                   
                                </tbody>
                            </table>
                            <!-- 模态框 -->
                            <div class="modal fade" id="modify_text">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <!-- 模态框头部 -->
                                        <div class="modal-header">
                                            <h4 class="modal-title">修改</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <!-- 模态框主体 -->
                                        <div class="modal-body">
                                            <!-- 加载内容栏目 -->
                                            <div class="col-md-12" style="margin:0 auto;">
                                                <ul class="list-unstyled">
                                                    <li style="margin:1rem 0;">
                                                        <h3>标题</h3>
                                                        <input id="modify_c_title"  type="text" class="col-md-12 border" placeholder="输入标题"
                                                            style="height: 40px;border-radius: 3px;">
                                                    </li>
                                                    <li style="margin:2rem 0;">
                                                        <h3>内容输入</h3>
                                                        <script id="editor_modify" type="text/plain" style="height:300px;"></script>
                                                    </li>
                                                
                                                </ul>
                                            </div>
                                            <!-- 内容栏目结束 -->
                                            <!-- 模态框底部 -->
                                            <div class="modal-footer">
                                                <button class="col-md-3 border bg-light" style="height: 50px;"
                                                    data-dismiss="modal" id="modify_true">修改</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 模态窗口结尾 -->
                            <!-- 页数按钮 -->
                            <ul class="list-unstyled list-inline" id="content_page">
                                <li class="list-inline-item"><button class="btn btn-light border">1</button></li>
                                <li class="list-inline-item"><button class="btn btn-light border">2</button></li>
                                <!-- <li class="list-inline-item"><button class="btn btn-light border">3</button></li>
                                <li class="list-inline-item"><button class="btn btn-light border">4</button></li> -->
                            </ul>
                        </div>
                        <!-- 内容添加栏目 -->
                        <div id="text_list2" class="tab-pane show fade ">
                            <div class="col-md-10" style="margin:0 auto;">
                                <ul class="list-unstyled">
                                    <li style="margin:2rem 0;">
                                        <h3>标题</h3>
                                        <input id="add_title"  type="text" class="col-md-12 border" placeholder="输入标题"
                                            style="height: 40px;border-radius: 3px;">
                                    </li>
                                    <li style="margin:2rem 0;">
                                        <h3>内容输入</h3>
                                        <script id="editor"  type="text/plain" style="height:300px;"></script>
                                    </li>
                                    <li>
                                        <button id="add_content" class="col-md-3 border bg-light" style="height: 50px;">添加</button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 添加栏目结尾 -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 标签管理 -->
        <div class="container-lg  tab-pane show fade" id="name4" style="margin:0 auto;">
            <div class="row">
                <h4 class="col-md-12 border-bottom" style="margin: 2rem 0;padding-bottom: 1rem;">标签管理</h4>
                <div class="input-group mb-3 input-group-lg">
                    <input type="text" id="add_label_text" class="form-control" placeholder="输入标签名">
                    <div class="input-group-append">
                      <button class="btn btn-dark" id="add_label_btn" type="button">添加</button>  
                     </div>
                  </div>
                  <ul id="label_list" class="list-unstyled list-inline col-md-12">
                  </ul>
            </div>
        </div>
        <!-- 个人主页 -->
        <div class="container-lg  tab-pane show fade " id="name5" style="margin:0 auto;">
            <div class="row">
                <div class="col-md-12 border" style="margin-top: 2rem;">
                    <div style="margin:1rem auto;width: 200px;height: 200px;">
                        <img id="p_head" style="border-radius: 50%;" alt="">
                    </div>
                    <!-- <p class="text-center" >鱼蛋</p> -->
                    <div class="col-md-2 mb-5" style="margin:0 auto">
                        <input id="p_name" type="text"class="text-center form-control" placeholder="请输入名字">
                      </div>
                </div>
                <div class="col-md-12 bg-light border" style="margin-top: 0;">
                    <h4 style="margin:1rem 0 1rem 1rem">备注</h4>
                    <textarea id="p_type" class="col-md-12" style="height: 100px;resize:none;"></textarea>
                    <button id="p_modify" class="btn btn-dark" style="margin:1rem 0 2rem 65rem">修改</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>